<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body>
<!--搜索框-->
<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <div class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" placeholder="请输入关键字" autocomplete="off" class="layui-input" />
            </div>
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-qiye-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">工卡状态</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="" lay-filter="cardStatus" id="cardStatus" lay-search>
                    <option value="">选择状态</option>
                </select>
            </div>
        </div>
    </div>
</blockquote>
<!--数据列表-->
<table class="layui-hide" id="test" lay-filter="qiye-table"></table>
<input type="file" style="display:none;" id="file" onchange="select_file()">

<script type="text/html" id="qiye-toolbar">
    {{# if( d.cardStatus==1) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="gs"><i class="layui-icon layui-icon-subtraction"></i>挂失</a>
    {{# } else{ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="bk">补卡</a>
    {{# } }}
</script>

<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/token.js"></script>
<script>

    var $ = undefined

    layui.use(['table'], function() {
        $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        var name = ""
        var cardStatus = ""

        table.render({
            elem: '#test'
            , id: 'staff-table-id'//重载需要
            , url: HOST+'staff/selectstaffGsBk'
            , title: '会员表'
            ,toolbar: '#toolbarDemo'
            , cols: [
                [{
                    field: 'id',
                    title: '序号',
                    type: 'numbers',
                    align: 'center'
                },{field: 'bh',align : 'center', title: '员工编号', width:140}
                , {field: 'name', width: 100, align: 'center', title: '姓名'}
                , {field: 'cardNo', width: 140, align: 'center', title: '员工卡号'}
                ,{field:'sex',width : 80,align : 'center', title: '性别',templet: function (d) {
                        if (d.sex==0) return "女";
                        else if (d.sex==1) return "男";
                    }
                }
                , {field: 'phone',align : 'center',title: '联系方式' , width:140}
                , {field: 'address',align : 'center',title: '家庭住址', width:160}
                    , {field: 'picture',align : 'center',title: '头像',width : 125,templet:function(d){
                        if (d.picture==null || d.picture==""){
                            return "";
                        }else{
                            return "<div><img src=\""+HOST+"upload/"+d.picture+"\" style=\"width: 70px;height: 50px;\" onclick=\"previewImgs(this)\"></div>";
                        }
                    }
                }
                , {field: 'cardStatus',align : 'center', width:110, title: '工卡状态',templet: function (d) {
                        if (typeof d.cardStatus === "undefined") return "";
                        if (d.cardStatus==1) return "启用";
                        else if (d.cardStatus==2) return "停用";
                        else if (d.cardStatus==3) return "挂失";
                        else if (d.cardStatus==4) return "冻结";

                    }}
                ,{toolbar: "#qiye-toolbar",align : 'center', width: 220, title: "操作" , fixed:"right"}
            ]]
            , page: true
            ,page: {
                curr: layui.data("gp_staff_page").index
            },
            done: (res, curr, count) => {
                layui.data("gp_staff_page", {
                    key: 'index',
                    value: curr
                });
            }
        });
        window.setTimeout(function(){
            // 在移动端去掉表格右侧的固定内容
            let bodywidth = $("body").width();
            if(bodywidth<1000){
                $(".layui-table-fixed").empty();
            }
        },100)

        //搜索操作
        form.on('submit(search-qiye-submit)', function (data) {
            name = data.field.name
            table.reload('staff-table-id', {
                where: {"name": name, "cardStatus":cardStatus}
                , page: {
                    curr: 1
                }
            });
            return false;
        });

        // 动态添加状态
        $.ajax({
            url:HOST+"card/getCardStatusDic" ,
            success:function(res){
                if(res.code == 0) {
                    for(var i in res.data) {
                        $("#cardStatus").append("<option value='"+res.data[i].code+"'>"+res.data[i].name+"</option>")
                    }
                    form.render()
                }
            }
        });
        // 搜索状态
        form.on('select(cardStatus)', function(data){
            cardStatus = data.value
            name = $("#name").val()
            table.reload('staff-table-id', {
                where: {"name":name,"cardStatus":cardStatus}
                , page: {
                    curr: 1
                }
            });
        });

        //表操作  监听操作
        table.on('tool(qiye-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if (event === 'bk') {
                var data = obj.data;
                layer.open({
                    type:2
                    ,title:"员工补卡"
                    ,skin:'layui-layer-molv'
                    ,area: ['80%', '80%']
                    ,content:(encodeURI("staff_bk.html?id="+data.id+"&name="+data.name+"&sex="+data.sex+"&phone="+encodeURIComponent(data.phone)+"&bh="+data.bh+"&picture="+data.picture+"&jfstatus="+data.jfstatus+"&message="+encodeURIComponent(data.message)+"&status="+data.status+"&dqtime="+data.dqtime))  //js获取url参数
                    ,success: function (index, layero) {
                        // 这里是这个弹出层打开完成后所进行的操作
                        // form.ready();
                    }
                });
            }else if (event === 'gs') {
                layer.confirm("确定挂失？",function (index) {
                    $.ajax({
                        url: HOST+"card/cardGs?id=" + data.cardNo+"&status=1"
                        , type: "GET"
                        , success: function (data) {
                            if (data.code == 0) {
                                layer.msg("挂失成功");
                                layer.close(index);
                                table.reload("staff-table-id");
                            } else {
                                layer.msg("挂失失败");
                            }
                        }
                        , error: function () {
                            console.log("ajax error");
                        }
                    });
                })
            }
        });
    });

    function select_file(){
        var fd = new FormData();
        fd.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: HOST+"upload_bg",
            type: "POST",
            processData: false,
            contentType: false,
            data: fd,
            success: function(d) {
                console.log(d);
            }
        });
    }
</script>

<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</body>
</html>